@import '~styles/varibles.styl'
@import '~styles/mixins.styl'

#myPlayer {
  width: 100%;
  height: 100%;
}
::-webkit-scrollbar-track
{
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1);
  background-color: #142b58;
  border-radius: 10px;
}
::-webkit-scrollbar
{
  width: 10px
  border-radius: 100px
  background-color: #142b58
}
::-webkit-scrollbar-thumb
{
  border-radius: 10px;
  background-color: #FFF;
  background-image:
  linear-gradient(to bottom, #18437b 0%, #1867a6 50%, #18437b 100%)
  border: 1px solid #185590
}

.main-box
  flex: 1
  width: 100%
  min-height: 1px
.main
  display: flex
  flex-direction: column
  width: 100%
  height: 100%
  .line
    height: 10px
  .middle
    display: flex
    flex-direction: row
    flex: 1
    highShadowBlock()
    .left
      flex: 1
    .right
      position: relative
      width: 600px
      .refresh
        position: absolute
        top: 10px
        right: 20px
        button
          margin-left: 10px
          .btn1
            display: inline-block
      .ranking
        height: 100%
        li
          display: flex
          flex-direction: column
          height: 50%
          .title
            margin: 20px 0 10px 15px
          .content
            flex: 1
            margin-right: 20px
  .bottom
    height: 300px
    highShadowBlock()
    .statistics
      display: flex
      width: 100%
      height: 100%
    .statistics > li
        display: flex
        flex-direction: column
        flex: 1
        .title
          margin: 15px 0 15px 25px
        .content
          flex: 1
          margin: 0 15px 15px
          border: 2px solid #114d8a
          border-bottom: 1px solid #367fd9
          background: linear-gradient(to bottom, rgba(26, 123, 191, 0) 0%, rgba(28, 85, 131, .7) 100%)
    .statistics > li:nth-child(1)
      .list
        li:last-child
          width: 100%
    .statistics > li:nth-child(2)
      .content
        padding: 20px 30px 10px
        box-sizing: border-box
        li
          float: left
          width: 50%
          height: 100%
          box-sizing: border-box
    .statistics > li:nth-child(4)
      .content
        li
          float: left
          width: 50%
          height: 100%
          box-sizing: border-box
          padding: 20px 0
.contrast-box
  flex: 1
  width: 100%
  min-height: 1px
  padding: 35px 20px 20px
  box-sizing: border-box
  .contrast
    width: 100%
    height: 100%
    background: rgba(11, 30, 81, .6)
    border: 1px solid #27599a
    padding: 20px
    box-sizing: border-box
    .angels
      b:first-child
        display: none
    .c-navTab
      position: absolute
      left: 0
      bottom: 100%
      li
        float: left
        position: relative
        background: #0d124c
        height: 25px
        line-height: 25px
        padding: 0 15px
        border: solid #27599a
        border-width: 1px 0 0
        cursor: pointer
        font-weight: 400
        transition: all 1s
        margin: 0 0 1px 12px
        color: #4dd5ff
      li:before, li:after
        position: absolute
        border-style: solid
        border-color: inherit
        content: ''
        top: -1px
        width: 20px
        height: 100%
        background: inherit
      li:before
        border-width: 1px 0 0 1px
        left: -8px
        transform: skew(-20deg, 0deg)
        box-shadow: rgba(0,0,0,.2) -3px 2px 5px, inset rgba(255,255,255,.09) 1px 0
        border-radius: 5px 0 0 0
      li:after
        border-width: 1px 1px 0 0
        right: -8px
        transform: skew(20deg, 0deg)
        box-shadow: rgba(0,0,0,.2) 3px 2px 5px, inset rgba(255,255,255,.09) -1px 0
        border-radius: 0 5px 0 0
      li.active
        z-index: 9
        background: #1b79bc
        color: #fff
        text-shadow: 0 1px 3px rgba(0, 0, 0, .5)
        border-color: transparent
      li.active:before
        border-color: #abebff
    .c-main-box-box
      height: 100%
      overflow: hidden
      .c-main-box.translateX
        transform:translateX(-50%)
      .c-main-box
        height: 100%
        width: 200%
        transition:all 1s cubic-bezier(0.01, 0.79, 0.01, 1)
        .c-main
          float: left
          width: 50%
          height: 100%
          .c-right:before
            content: ''
            position:absolute
            top: 0
            left: 0
            width: 1px
            height: 100%
            background-image: linear-gradient(to bottom, #1d4287 0%, #1d4287 50%, transparent 50%)
            background-size: 1px 8px
            background-repeat: repeat-y
          .c-left, .c-right
            float: left
            display: flex
            flex-direction: column
            width: 50%
            height: 100%
            padding-right: 25px
            box-sizing: border-box
            .filter-box
              position: relative
              margin-bottom: 20px
              .title-date
                height: 30px
                margin-bottom: 20px
                .title
                  float: left
                ul
                  float: right
                  li
                    float: left
                    margin-left: 20px
                    box-sizing: border-box
                    line-height: 28px
                  li.on
                    transition: all .3s
                    box-shadow: 0 0px 5px rgba(255, 255, 255, .4)
                    background: linear-gradient(to right, rgba(26,123,191,0.8) 0%, rgba(26,123,191,1) 100%)
            .echarts-box
              flex: 1
              min-height: 1px
          .c-right
            position: relative
            padding-left: 20px
            .filter-box:after
              display: none
              position: absolute
              z-index: 9
              content: ''
              top: 100%
              margin-top: 20px
              left: 0
              width: 100%
              height: 20px
              background-image: linear-gradient(to bottom, rgba(18, 33, 74, 1) 0%, rgba(18, 33, 74, 0) 100%)
            .echarts-box
              height: 1px
              // overflow-x: hidden
.contrast-box.growth
  .c-right
    .echarts-box
      overflow-x: hidden
      
.warn-box
  .title
    width: 220px
    float: left
  .e-message
    float: right
    margin: 15px
    position: relative
    z-index: 1
  .content
    display: flex
    flex-direction: column
    padding: 0!important
    .warn
      height: 10px
      line-height: 30px
      color: #ffe98f
      font-size: 12px
      i
        color: #ff6c19
        font-size: 18px
    .matts, .echarts-box
      flex: 1
      height: auto
      min-height: 1px
      padding: 20px